<template>
    <div class="side_bar">
        <div class="title">
            <img src="@/assets/img/logo/logo.png">
            <p>图小二后台管理</p>
        </div>
        <div class="list">
            <div class="item"
                 v-for="(item,index) in nav"
                 :key="index">
                <router-link :to="item.path"
                             class="link">
                    <el-icon size='20'>
                        <component :is="item.icon" />
                    </el-icon>
                    <p>{{item.title}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute(), router = useRouter()
const nav = reactive([
    {
        "icon": "HomeFilled",
        "path": "/index",
        "title": "控制台"
    },
    {
        "icon": "UserFilled",
        "path": "/user",
        "title": "用户管理"
    },
    {
        "icon": "LocationFilled",
        "path": "/money",
        "title": "存取记录"
    },
    {
        "icon": "Tools",
        "path": "/seting",
        "title": "系统设置"
    },
])
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.side_bar {
    width: 200px;
    background: #304156;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 9;
    .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 20px;
        img {
            height: 30px;
        }
        p {
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            margin-left: 10px;
        }
    }
    .list {
        height: calc(100% - 50px);
        .link {
            width: 100%;
            display: flex;
            align-items: center;
            height: 50px;
            color: #bfcbd9;
            padding-left: 20px;
            p {
                margin-left: 10px;
            }
            &.router-link-active,
            &:hover {
                color: #fff;
                background: #2d3d51;
            }
        }
    }
}
@media screen and (max-width: 991px) {
    .side_bar {
        width: 65px;
        .title {
            p {
                display: none;
            }
        }
        .list {
            .item {
                .link {
                    p {
                        display: none;
                    }
                }
            }
        }
    }
}
</style>